import React, {useEffect, useState} from "react"
import {connect} from 'react-redux'
import {Button, Col, Label, Modal, ModalBody, ModalFooter, ModalHeader, Row} from "reactstrap";
import {AvFeedback, AvField, AvForm, AvGroup, AvInput} from "availity-reactstrap-validation";
import FullLoadingSpinner from "../../../components/@vuexy/spinner/Full-loading-spinner";
import SelectProject from "../../../components/general/SelectProject";
import {setData, setFieldData} from "../../../redux/actions/helper";
import {addRelease, getReleasesTypes} from "../../../redux/actions/releases";
import {CLEAR_RELEASES_MODAL, RELEASES_MODAL_STATUS, RELEASE_MODAL_FIELD} from "../../../redux/constants/releases";

const AddRelease = props => {

  const [validate, setValidate] = useState({
    selectProjectInvalid: false
  })

  const handleValidSubmitRelease = () => {
    props.addRelease(props.modalData, props.userFilterData)
  }

  const customValidation = () => {
    !props.modalData.project_id && setValidate({...validate, selectProjectInvalid: true})
  }

  const toggleModal = () => {
    props.setData(RELEASES_MODAL_STATUS, false)
    props.setData(CLEAR_RELEASES_MODAL)
    setValidate({
      selectProjectInvalid: false,
    })
  }

  return (
    <React.Fragment>
      <Modal
        isOpen={props.modal}
        toggle={toggleModal}
        size="sm"
      >
        <ModalHeader toggle={toggleModal}>Добавить релиз</ModalHeader>

        <AvForm onValidSubmit={handleValidSubmitRelease} className="authentication-form mt-1" id="addReleaseForm">
          {props.spinner.indexOf('release-create') !== -1 && <FullLoadingSpinner/>}
          <ModalBody>
            <Row>
              <Col md="12">
                <div>
                  <AvGroup className={'release-form-item'}>
                    <Label for="projectList">Проект</Label>
                    <SelectProject
                      maxMenuHeight={220}
                      projectList={props.projectsList}
                      setData={props.setData}
                      onChange={e => props.setFieldData(RELEASE_MODAL_FIELD, "project_id", e.value)}
                      required={validate.selectProjectInvalid}
                      owner={props.verify_id}
                      isGetProjects={true}
                      onlyOwners
                    />
                  </AvGroup>
                </div>
              </Col>

            </Row>
          </ModalBody>
          <ModalFooter>
            <Button.Ripple
              color="primary"
              type="submit"
              className="project-modal-button"
              onClick={customValidation}
            >
              Добавить
            </Button.Ripple>
          </ModalFooter>
        </AvForm>
      </Modal>
    </React.Fragment>
  )
}

const mapStateToProps = state => ({
  modal: state.releases.modal,
  modalData: state.releases.modalData,
  userFilterData: state.releases.userFilterData,
  spinner: state.helper.spinner,
  projectsList: state.projects.ownerProjectList,
  verify_id: state.users.data.verify_id,
})

export default connect(mapStateToProps, {
  setData,
  setFieldData,
  getReleasesTypes,
  addRelease
})(AddRelease)
